<template>
  <div class="home">
    <div class="banner">
      <div class="banxin">
        <img src="../assets/images/home/banner.png" alt="" />
      </div>
    </div>
    <Title :src="Recommend" title="精品推荐" />
    <Product :jingpin="shangpinName" />
    <Title :src="Hot" title="热门兑换" />
    <img class="banxin tanxin ad" src="../assets/images/home/ad.png" />
    <Product :jingpin="shangpinName1" />
    <div class="home_b">
      <Title :src="Integral" title="积分攻略" />
      <Product title="积分攻略" />
    </div>
  </div>
</template>

<script>
import { GetjingpingData, GetHotData } from "../request/api";
import Title from "@/components/home/Title.vue";
import Product from "@/components/Product.vue";
export default {
  data() {
    return {
      //图片模块
      Recommend: require("../assets/images/home/Recommend.png"),
      Hot: require("../assets/images/home/hot.png"),
      Integral: require("../assets/images/home/integral.png"),
      //精品推荐数据
      shangpin: [],
      shangpinName: [],
      //热门数据
      shangpin1: [],
      shangpinName1: [],
    };
  },
  created() {
    //精品数据接口请求
    GetjingpingData().then((res) => {
      this.shangpin = res.data.data.data.records;
      this.shangpin.forEach((item) => {
        this.shangpinName.push({
          name: item.name,
          coin: item.coin,
          coverImg: "http://sc.wolfcode.cn" + item.coverImg,
          isHotSale: item.isHotSale,
          isLatest: item.isLatest,
        });
      });
      console.log(this.shangpinName);
    });
    //热门数据接口请求
    GetHotData().then((res) => {
      this.shangpin1 = res.data.data.data.records;
      this.shangpin1.forEach((item) => {
        this.shangpinName1.push({
          name: item.name,
          coin: item.coin,
          coverImg: "http://sc.wolfcode.cn" + item.coverImg,
        });
      });
      console.log(this.shangpinName1);
    });
  },
  components: {
    //组件注册
    Title,
    Product,
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.home {
  /* 样式写入 */
  background-color: #f5f5f5;
  .banner {
    padding-bottom: 30px;
    margin-top: 10px;
    background-color: white;
  }
  .home_b {
    margin-top: 10px;
    background-color: white;
  }
}
.ad {
  margin-bottom: 30px;
}
</style>